<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
    <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
    <link rel="stylesheet" href="../../login/css/register.css" />
    <style type="text/css">
      .mui-input-row label~textarea{
        border: 1px solid #dcdcdc;
        padding: 10px;
        width: 70vw;
        font-size: 14px;
        height: 30vw;
      }
	  .ht-radio{display:inline-flex;line-height: normal;}
	  .ht-radio label{width: auto;}.ht-radio input[type=radio]{top:6px;}
    </style>
	</head>
	<body>
    <header class="mui-bar mui-bar-nav">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    	<h1 class="mui-title">外来人员登记</h1>
    </header>
    <div class="mui-content" id="container" style="padding-bottom: 30px;">
      <div class="mui-input-group">
        <div class="mui-input-row">
          <label>姓名</label>
          <input type="text" class="mui-input-clear" placeholder="请输入姓名" maxlength="45" v-model="form.compellation">
        </div>
        <div class="mui-input-row">
          <label>性别</label>
		  <!--
         <span class="mui-input-clear gongzhong" @click="sexPicker()">{{form.sex==''?'请选择性别':form.sex=='1'?'男':'女'}}</span>
		  -->
			<div class="mui-input-clear" style="display: flex;justify-content: flex-end;">
			  <div class="ht-radio mui-radio">
				<label>男</label>
				<input name="radio1" type="radio" v-model="form.sex" value="1">
			  </div>
			  <div class="ht-radio mui-radio">&nbsp;</div>
			  <div class="ht-radio mui-radio">
				<label>女</label>
				<input name="radio1" type="radio" v-model="form.sex" value="2">
			  </div>
			</div>
		</div>
        <div class="mui-input-row">
          <label>身份证号</label>
          <input type="text" class="mui-input-clear" placeholder="请输入身份证号码" maxlength="45" v-model="form.idCard">
        </div>
        <div class="mui-input-row">
          <label>手机号</label>
          <input type="text" class="mui-input-clear" placeholder="请输入手机号" maxlength="45" v-model="form.phone">
        </div>
        <div class="mui-input-row">
        	<label>所属单位</label>
        	<span class="mui-input-clear gongzhong" id="quyu" @click="chooseQuyu()" style="height: 50px;"> {{form.enterpriseName!=''?form.enterpriseName:'请选择所属单位'}}</span>
        	<!--<input type="text" class="mui-input-clear" placeholder="">-->
        </div>
        <div class="mui-input-row">
        	<label>所属项目</label>
        	<span class="mui-input-clear gongzhong" @click="chooseP()" style="height: 50px;">{{form.currentProjectName!=''?form.currentProjectName:'请选择所属项目'}}</span>
        	<!--<input type="text" class="mui-input-clear" placeholder="请选择风场">-->
        </div>
        <div class="mui-input-row" id="timeBtn">
          <label>入场时间</label>
          <span class="mui-input-clear gongzhong" data-options={} @click="chooseTime($event)">{{form.approachTime}}</span>
        </div>
        <div class="mui-input-row" style="height: auto;padding: 2vw;">
        	<label style="width: auto;">工作内容</label>
          <textarea rows="" cols="" v-model="form.content" placeholder="请输入50字以内">
            
          </textarea>
        </div>
        <div style="padding: 10px;">
          <div class="padding">
            <input name="checkbox1" v-model="agree" type="checkbox" style="background-color: #fff;">
            <label style="width: 80%;">我已阅读</label><span style="color: #0077DC;" @click.stop="notice()">《外来人员入场登记须知条款》</span>
          </div>
        </div>
        <span class="register" @click="submit()">提交登记</span>
      </div>
    </div>

  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/jquery-3.2.1.min.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
  <script src="../../../js/common.js"></script>
  <script src="../../../js/mui.picker.min.js"></script>
  <script type="text/javascript" src="../../../js/vue.js"></script>
  <script type="text/javascript">
    var registerWPage = null;
    var picker = new mui.PopPicker();
    // alert($('#timeBtn').text())
    // $('#timeBtn').click(function(){
    //   console.log('1111111111')
    // })
    // mui.init()
    
    
    registerWPage = new Vue({
      el: '#container',
      data: {
        form:{
          appUserId:"",//app外来人用户id
          compellation:"",////姓名
          sex:"",//性别1:男2：女
          idCard:"",//身份证
          phone:"",//手机号
          enterpriseId:'',//单位ID
          enterpriseName:'',//单位名称
          approachTime:'',//进场时间
          projectId:"",//项目ID
          currentProjectName:'',//项目名称
          content:"",//工作内容
          
        },
        agree:false
        
      },
      created: function() {
        this.nowDate()
      },
      methods: {
        nowDate(){
          var date = new Date()
          var year = date.getFullYear()
          	
          /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
          var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
          var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
          var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
          var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          // 拼接
          this.form.approachTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes 
        },
        timestamp(time){
          var date = new Date(time)
          var time = Date.parse(date);
          return time
        },
        notice(){
          mui.openWindow({
            url: '../home/notice.html',
            id: '../home/notice.html',
            extras: {
            }
          })
        },
        submit() {
          var _this=this
          if(_this.form.compellation==''){
              mui.toast('请输入姓名');
              return false;
          }
          if(_this.form.sex==''){
              mui.toast('请选择性别');
              return false;
          }
          if(_this.form.idCard==''){
              mui.toast('请输入身份证号');
              return false;
          }
          if(!checkIDCard(_this.form.idCard)){
              mui.toast('请输入正确的身份证号');
              return false;
          }
          if(_this.form.enterpriseId==''){
              mui.toast('请选择所属单位');
              return false;
          }
          if(_this.form.projectId==''){
              mui.toast('请选择所属项目');
              return false;
          } 
          var isPhone=false
          if (!(/^1[3456789]\d{9}$/.test(_this.form.phone))) {
            isPhone=true
          }
          if(isPhone){
             mui.toast('请输入正确的手机号');
             return false; 
          }
          if(_this.form.content==''){
              mui.toast('请输入工作内容');
              return false;
          }
           if(!_this.agree){
               mui.toast('请先阅读外来人员入场登记须知');
               return false;
           }
          _this.form.approachTime=_this.timestamp( _this.form.approachTime)
          plus.nativeUI.showWaiting('登记中...');
          mui.baseWApp.httpRequst('/registration', _this.form, function(data) {
            if(data.code=='0'){
              plus.nativeUI.closeWaiting();
              plus.webview.currentWebview().close();
             // mui.openWindow({
             //   url: '../../login/login.html',
             //   id: 'login.html',
             // });
            }else{
              mui.toast(data.msg)
            }
            
          }, function() {
            plus.nativeUI.closeWaiting();
            console.log("登录失败");
          }, 'post');
          
        },
        chooseTime(){
          
        },
        sexPicker(){
          var that=this; 
          picker.setData([{
          		value: '1',
          		text: '男'
          	},
          	{
          		value: '2',
          		text: '女'
          	},
          ]);
          picker.show(function(selectItems) {
            that.form.sex=picker.getSelectedItems(selectItems)[0].value;
          });
        },
        chooseQuyu(){
          var that=this;
          mui.baseWApp.httpRequst('/enterprise/list', {},
          	function(data) {
              console.log(JSON.stringify(data.data))
          		if(data.code == '0') {
                var Data = new Array();
          			$.each(data.data, function(i, v) {
          				var temp = {
          					value: v.id,
          					text: v.enterpriseName
          				}
          				Data.push(temp);
          			});
                picker.setData(Data);
                picker.show(function(selectItems) {
                  that.form.enterpriseName=picker.getSelectedItems(selectItems)[0].text;
                  that.form.enterpriseId=picker.getSelectedItems(selectItems)[0].value;
                  that.form.currentProjectName='';
                  that.form.projectId='';
                });
          		} else if(data.status == "500") {
          			console.log('获取区域信息失败!')
          		}
          	},
          	function() {
          		console.log("获取区域信息失败");
          		//					mui.toast("获取区域信息失败！！！");
          	});
        },
        chooseP(){
          var that=this
          if(that.form.enterpriseId==''){
            mui.toast('请选择所属单位')
            return
          }
          mui.baseWApp.httpRequst('/project/queryList', {enterpriseId:this.form.enterpriseId},
          	function(data) {
              console.log(JSON.stringify(data.data))
          		if(data.code == '0') {
                if(data.data.length===0){
                  mui.toast('此项目下没有项目，请重新选择')
                  return false
                }
                var Data = new Array();
          			$.each(data.data, function(i, v) {
          				var temp = {
          					value: v.id,
          					text: v.projectName
          				}
          				Data.push(temp);
          			});
                picker.setData(Data);
                picker.show(function(selectItems) {
                  that.form.currentProjectName=picker.getSelectedItems(selectItems)[0].text;
                  that.form.projectId=picker.getSelectedItems(selectItems)[0].value;
                });
          		} else {
          			mui.toast(data.msg)
          		}
          	},
          	function() {
          		console.log("获取区域信息失败");
          		//					mui.toast("获取区域信息失败！！！");
          	});
        }
        
      }
    })
  
    // (function($) {
    				mui.init();
    				var btn = $('#timeBtn')[0];
    					btn.addEventListener('tap', function() {
    						var _self = this;
    						if(_self.picker) {
    							_self.picker.show(function (rs) {
    								result.innerText = '选择结果: ' + rs.text;
    								_self.picker.dispose();
    								_self.picker = null;
    							});
    						} else {
    							var optionsJson = this.getAttribute('data-options') || '{}';
    							var options = JSON.parse(optionsJson);
    							var id = this.getAttribute('id');
    							/*
    							 * 首次显示时实例化组件
    							 * 示例为了简洁，将 options 放在了按钮的 dom 上
    							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
    							 */
    							_self.picker = new mui.DtPicker(options);
    							_self.picker.show(function(rs) {
    								/*
    								 * rs.value 拼合后的 value
    								 * rs.text 拼合后的 text
    								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
    								 * rs.m 月，用法同年
    								 * rs.d 日，用法同年
    								 * rs.h 时，用法同年
    								 * rs.i 分（minutes 的第二个字母），用法同年
    								 */
                    registerWPage.form.approachTime=rs.text
                    console.log(rs.text)
    								// result.innerText = '选择结果: ' + rs.text;
    								/* 
    								 * 返回 false 可以阻止选择框的关闭
    								 * return false;
    								 */
    								/*
    								 * 释放组件资源，释放后将将不能再操作组件
    								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
    								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
    								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
    								 */
    								_self.picker.dispose();
    								_self.picker = null;
    							});
    						}
    						
    					}, false);
    			// })(mui);
          //身份证号验证
          function checkIDCard(idcode){
              // 加权因子
              console.log(idcode)
              var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
              // 校验码
              var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
          
              var code = idcode + "";
              var last = idcode[17];//最后一位
          
              var seventeen = code.substring(0,17);
          
              // ISO 7064:1983.MOD 11-2
              // 判断最后一位校验码是否正确
              var arr = seventeen.split("");
              var len = arr.length;
              var num = 0;
              for(var i = 0; i < len; i++){
                  num = num + arr[i] * weight_factor[i];
              }
              
              // 获取余数
              var resisue = num%11;
              var last_no = check_code[resisue];
          
              // 格式的正则
              // 正则思路
              /*
              第一位不可能是0
              第二位到第六位可以是0-9
              第七位到第十位是年份，所以七八位为19或者20
              十一位和十二位是月份，这两位是01-12之间的数值
              十三位和十四位是日期，是从01-31之间的数值
              十五，十六，十七都是数字0-9
              十八位可能是数字0-9，也可能是X
              */
              var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
          
              // 判断格式是否正确
              var format = idcard_patter.test(idcode);
              console.log(last === last_no)
              console.log(format)
              // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
              return last === last_no && format ? true : false;
          }
  </script>
  </body>
</html>
